<template>
    <section class="service">
        <dl>
            <dt>
                <div class="avatar">
                    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2725611014,1330825035&fm=27&gp=0.jpg" alt="">
                    <em class="avatar__state avatar__state-success"></em>
                </div>
            </dt>
            <dd class="service__name"><h4>Jean Ellis <span>客户经理</span></h4></dd>
            <dd class="service__remark"><p>提升店铺成交量就请找我把</p></dd>
            <dd><p>Tel：<strong>021 - 88665533</strong></p></dd>
            <dd class="service__flow">
                <i-badge class="service__badge" dot :count="1">
                    <i-button type="info" size="small">在线提问</i-button>
                </i-badge>
            </dd>
        </dl>
        <ul class="service__info">
            <li><strong>193</strong><span>次服务</span></li>
            <li><strong>120</strong><span>个赞</span></li>
        </ul>
    </section>
</template>

<script>
export default {
    name: 'service',
    data() {
        return {}
    }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.service {
    background: #fff;
    border-radius: @radius;
    padding-top: 30px;
    overflow: hidden;
    .service__name {
        margin-top: 8px;
    }
    .service__flow {
        margin-top: 4px;
        margin-bottom: 24px;
    }
    .service__info {
        border-top: 1px solid @background-color-base;
        display: flex;
        width: 100%;
        text-align: center;
        li {
            border-right: 1px solid @background-color-base;
            flex: 1;
            padding: 6px 0;
        }
        li:last-of-type {
            border-right: 0;
        }
        strong,
        span {
            display: block;
        }
        span {
            color: @subsidiary-color;
        }
    }
    .service__badge .ivu-badge-dot {
        background: #fa9805;
    }
    dl {
        text-align: center;
        dt {
            position: relative;
        }
        dd {
            display: block;
            padding: 2px 0;
        }
        h4 {
            font-size: 14px;
            span {
                color: @subsidiary-color;
                font-size: 12px;
                font-style: normal;
                font-weight: normal;
            }
        }
        .avatar {
            width: 76px;
            height: 76px;
            border-radius: 9999px;
            position: relative;
            margin: 0 auto;
            img {
                border-radius: 9999px;
                width: 100%;
                height: 100%;
            }
        }
        .avatar__state {
            position: absolute;
            bottom: 10px;
            right: 0px;
            width: 12px;
            height: 12px;
            border: 2px solid #fff;
            border-radius: 9999px;
        }
        .avatar__state-success {
            background: #41c177;
        }
    }
}
</style>


